<template>
  <div class="staff-page-bg c-pt60">
    <div class="staff-content-bg">
      <img class="c-ww120 c-hh120 c-brp50 c-m-0auto" :src="$addXossFilter(inviteStaffInfo.headimgurl, require('@/assets/defult_head.png'))" alt="">
      <div class="c-fs28 fc-B38E5B c-m-0auto c-textAlign-c c-mt20 c-text-ellipsis1 c-w60">{{inviteStaffInfo.nickname}}</div>
      <div class="c-fs28 fc-B38E5B c-mt36 c-textAlign-c">诚邀您成为我的员工</div>
      <div class="c-fs28 fc-B38E5B c-mt4 c-textAlign-c">一起参与推广</div>
      <div @click="clickInvited" class="c-ww280 c-hh64 c-flex-row c-flex-center c-bg-white c-fs28 fc-330000 c-br32 c-mlr-auto c-mt120">立即加入</div>
    </div>
    <div class="c-mt30 c-ph30 c-pb32">
      <p class="c-fs28 c-fc-white">员工规则</p>
      <p class="c-fs24 c-fc-white c-lh44 c-mt16">1、如果邀请者不是您的推荐人，同意邀请后，他将变为您的推荐人；您直推的用户还是在您名下；</p>
      <p class="c-fs24 c-fc-white c-lh44">2、同意成为员工后，通过推广，您正常可以获得比普通用户更高一些的员工推广收益，默认收益比例为{{inviteStaffInfo.initStaffRatio}}%；服务商有权进行适当修改。</p>
    </div>
    <cj-popup v-model="showModal" round>
      <div class="c-ww500 c-bg-white c-pv40 c-ph24">
        <div class="iconfont c-fs80 c-fc-send-green c-textAlign-c">&#xe82e;</div>
        <div class="c-fc-xblack c-fs28 c-fw600 c-textAlign-c c-mt30">恭喜您成为【{{inviteStaffInfo.nickname}}】的员工</div>
        <div class="c-fc-sblack c-fs28 c-fw400 c-textAlign-c c-mt12">欢迎前往员工工作台，推广产品</div>
        <div @click="goMemberIndex" class="c-fc-white c-ww280 c-hh64 c-flex-row c-flex-center c-fs28 c-br32 c-bg-FF5355 c-mt40 c-m-0auto">立即前往</div>
      </div>
    </cj-popup>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
export default {
  name: 'GetInviteStaff',
  components: {
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      showModal: false,
      inviteStaffInfo: '',
      agentUserId: '',
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    goMemberIndex() {
      this.$routerGo(this, "push", { path: "/homePage/agent/staffIndex" });
    },
    getInviteStaffInfo() {
      utilJs.getMethod(`${global.apiurl}Agent/inviteStaffInfo?agentUserId=${this.agentUserId}`, res => {
        this.inviteStaffInfo = res;
      });
    },
    clickInvited() {
      utilJs.postMethod(`${global.apiurl}Agent/becomeStaff`, {agentUserId: this.agentUserId}, res => {
        this.showModal = true;
      });
    },
    //分享
    wechatShare: function () {
      let title = '';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, title, "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let title = '';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      utilJs.appShareTrue(title, "", shareUrl, "");
    }
  },
  activated() {
    this.showModal = false;
    this.agentUserId = this.$route.query.auId;
    this.getInviteStaffInfo();
    setDocumentTitle("邀请员工");// eslint-disable-line
    this.wechatShare();
  },
  deactivated() {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.staff-page-bg {
  background-image: linear-gradient(180deg, #3B457B 0%, #2B325C 100%);
}
.staff-content-bg {
  width: 100%;
  height: 19.6rem;
  padding-top: 5.2rem;
  background: url('../../../assets/i/wap/newAreaAgent/inviteStaff.png') no-repeat left top;
  background-size: 100% 100%;
}
.fc-B38E5B {
  color: #B38E5B;
}
.fc-330000 {
  color: #330000;
}
</style>
